import React from "react";
import { Code } from "../../Code";
import "./style.css";
export default function Index() {
  return (
    <div className="page column p6">
      <div className="cover column">
        <div className="sub-title">无障碍</div>
        <div className="cover column">
          <div>
            眨眼和闪烁的动画对于有认知问题的人来说是有问题的，比如注意力缺陷多动障碍(ADHD)。
            <br />
            此外，某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性
          </div>
          <div>
            使用媒体查询 prefers-reduced-motion: reduce
            来判断是否需要关闭动画效果或减弱动画效果
          </div>
          <Code lang="css">{`@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}`}</Code>
        </div>
      </div>
    </div>
  );
}
